<template>
<div>
  <div class="play">
      <div class="name" >
          <img @mouseover ="sxishow = true" @mouseout="sxishow = false" :src="$store.state.musicuser.al.picUrl" alt="" v-if='$store.state.musicuser.al'>
          <img  :src="logo" alt="" v-else>
          <div  @click="isshow"  @mouseover ="sxishow = true" @mouseout="sxishow = false" v-show="sxishow" class="isshowlogo">
            <i v-if="show" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </div>
        <div class="nametitle">
          <div v-if='$store.state.musicuser.al' class="namename">{{$store.state.musicuser.name}}</div>
          <div v-if='$store.state.musicuser.al' >{{$store.state.musicuser.ar[0].name}}</div>
        </div>
      </div>
      <div class="playmius">
        <div class="ilogo">
          <i class="el-icon-refresh-left"></i>
          <i @click="xmus" class="iconfont iconshangyishou"></i>
          <i  class="iconfont icon24gf-play" @click="isplayhandle" v-if="$store.state.isplay"></i>
          <i  class="iconfont iconbofangzanting" @click="isplayhandle" v-else></i>    
          <i @click="jiamus" class="iconfont iconxiayishou"></i>
          <i v-if="audio.muted" @click="isjingying" class="iconfont jingying iconshengyin"></i>
          <i v-else @click="isjingying" class="iconfont jingying iconcaozuo-jingyin"></i>


          <!-- <a :href="$store.state.musicurl"   class="download" download>下载</a> -->
        </div> 
          
          <div class="block" > 
            <div>{{currtime}}</div>      
            <el-slider input-size='large' tooltip-class='tool' @change='audiochang'  v-model="value" :format-tooltip="formatTooltip"></el-slider>
            <div>{{maxtime}}</div> 

          </div>

       <audio ref="audio" autoplay  :src = '$store.state.musicurl' 
        @timeupdate="onTimeupdate" 
        @loadedmetadata="onLoadedmetadata"
        muted
        @ended="end"
        ></audio>
      </div>
      <div class="itemss">
        
          
          <el-button class="buttenel"   @click="drawer = true" type="primary" style="margin-left: 16px;">
            当前播放的歌单
          </el-button>
              
          <el-drawer
            title="我是标题"
            :modal='false'
            :visible.sync="drawer"
            :with-header="false">
            <!-- <span>我来啦!</span> -->
            <songlistcopy></songlistcopy>

          </el-drawer>

         
      </div>
       
    </div>
    <transition name="bounce">
        <playsongs :songgc="songgc" v-show="show"  class="playsongs"></playsongs>
    </transition>
</div>
    
</template>

<script>
import logo from '@/assets/topimg/wyylogo.jpg'
import http from '@/http/http.js'
import songlistcopy from '@/views/songlist/songlistcopy'
import playsongs from '@/views/playsongs'

function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  } else {
    return '0:00:00'
  }
}

export default {
  components: { songlistcopy, playsongs},
      data() {
        return {
          sxishow:false,
          show:false,
          value:0,
          logo:logo,
          drawer: false,
          index:this.$store.state.index,
          audio: {
            // 该字段是音频是否处于播放状态的属性
            playing: false,
            // 音频当前播放时长
            currentTime: 0,
            // 音频最大播放时长
            maxTime: 0,
            muted:true,  //是否静音
          },
          songgc:''
        }
      },
      mounted() {
        this.audioimg()
        this.$store.commit('currtime',this.$refs.audio.currentTime)
      },
      watch:{
        isplayhaddndle(){
            this.isplayhandle()
        },
      },
      computed:{
        
        currtime(){
            return realFormatSecond(this.audio.currentTime)
        },
        maxtime(){
            return realFormatSecond(this.audio.maxTime)
        }
      },
      methods: {
        
        isshow(){
            setTimeout(()=>{
              this.show = !this.show

            },500)
            
        },
          //播放结束知道播放下一首
          end(){
            this.jiamus()
          },
          //静音
          isjingying(){
            if(this.audio.muted === true){
                this.audio.muted = false
                this.$refs.audio.muted = true
            }else{
                this.audio.muted = true
                this.$refs.audio.muted = false
            }
            
          },

          // 拖动进度条，改变当前时间，index是进度条改变时的回调函数的参数0-100之间，需要换算成实际时间
          audiochang(index){

            this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)

          },
          onTimeupdate(res) {
          // console.log('timeupdate')
          // console.log(res)
          this.audio.currentTime = res.target.currentTime
          // 当音频当前时间改变后，进度条也要改变
          this.value = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
            this.$store.commit('currtime',this.audio.currentTime)
          //  console.log(this.audio.currentTime)

            
          },
          // 当加载语音流元数据完成后，会触发该事件的回调函数
          // 语音元数据主要是语音的长度之类的数据
          onLoadedmetadata(res) {
            // console.log('loadedmetadata')
            // console.log(res)
            this.audio.maxTime = parseInt(res.target.duration)
          },
          formatTooltip(index) {
          index = parseInt(this.audio.maxTime / 100 * index)
          return realFormatSecond(index)
          },


        xmus(){
          
            this.$store.commit('indexjian')

             var index = this.$store.state.index
            if(index>0){
            
            http({
                url:'/song/url',
                params:{
                    id:this.$store.state.songnew[index].id
                },
                
            }).then(res=>{
                // console.log(res.data.data[0])
                this.$store.commit('musicurlhandle',res.data.data[0].url)
                this.$store.commit('isplaybofang')

                
            })
            var songss = this.$store.state.songnew[index]
            this.$store.commit('musicuserhandle',songss)
            // this.$store.commit('indexjian')


          }else{
            this.$message.error('没有上首啦');
          }
          http({
            url:'/lyric',
            params:{
                id:this.$store.state.musicuser.id
            }
          }).then(res=>{
              this.songgc = res.data.lrc.lyric
              console.log(this.songgc)
          })
           
        },

        jiamus(){
          
            this.$store.commit('indexjia')
             var index = this.$store.state.index

          if(index<this.$store.state.songnew.length-1){

            http({
                url:'/song/url',
                params:{
                    id:this.$store.state.songnew[index].id
                },
                
            }).then(res=>{
                // console.log(res.data.data[0])
                this.$store.commit('musicurlhandle',res.data.data[0].url)
                this.$store.commit('isplaybofang')

                
            })
            var songss = this.$store.state.songnew[index]
            this.$store.commit('musicuserhandle',songss)
          }else{
            this.$message.error('没有下一首啦');

          }
          http({
            url:'/lyric',
            params:{
                id:this.$store.state.musicuser.id
            }
          }).then(res=>{
                 this.songgc = res.data.lrc.lyric
              // console.log(this.songgc)


          })
        },

        isplayhandle(){
          // this.isplay = true
          // console.log('点击')
          if(this.$store.state.isplay === true){
            this.$store.commit('isplayhandle')
            // this.$$store.commit('cs')
            this.$refs.audio.play()
          }else{
            this.$store.commit('isplayhandle')

            this.$refs.audio.pause()
          }
        // console.log(this.$store.state.isplay)

        },

        
        audioimg(){
          // console.log(value)
            this.$store.commit('musicurlhandle',this.logo)

          
        }
      },
      
}
</script>

<style lang="less">



.el-slider__bar{
    background-color: pink;
    width: 100px;

}
.el-slider__runway{
  width: 400px;
}
.el-slider__button{
  width: 12px;
  height: 12px;
  border: 1px solid pink;
   
}
</style>

<style lang="less" scoped>
.isshowlogo{
  position: fixed;
  left: 9px;
  bottom: 9px;
  width: 60px;
  height: 60px;
  border-radius: 3px;
  opacity: 0.5;
  color: white;
  background-color:black;
  font-size: 16px;
  text-align: center;
  line-height: 60px;
}

.bounce-enter-active {
  animation: bounce-in 1s;
}
.bounce-leave-active {
  animation: bounce-in 1s reverse;
}
@keyframes bounce-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.playsongs{
  // padding-top: 300px;
  position: fixed;
  left: 0;
  bottom: 78px;
  width: 100%;
  height: 92vh;
  z-index: 998;
    box-shadow:20px 20px 50px #666;  //边框阴影


}
.ilogo{
  text-align: center;
  font-size: 30px;
  // padding-right: 200px;
  color: pink;
  height: 35px;
  i{
    font-size: 30px;
    padding-left: 20px;
  }
  .jingying{
    padding-left: 100px;
  }
}
.buttenel{
  background-color: pink;
  border: pink;
  // border-radius: 1px;
}
.block{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 230px;
  margin-bottom: 60px;
  font-size: 12px;
  div{
    // margin-top:5px ;
    // height: 5px;
    color: pink;
  }
}


.play{
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 9vh;
  border-top: 1px solid #ccc;
  background-color: white;
  align-items: center;
  min-width: 1800px;
  img{
    width: 60px;
    height: 60px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
  }
  .name{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    cursor: pointer;
    .nametitle{
      div{
        font-size: 14px;
        margin-left: 10px;
        line-height: 30px;
        cursor: pointer;
      }
      .namename{
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .itemss{
    flex: 1;
  }
  // background-color: tomato;
  .playmius{
    flex: 2;
    height: 68px;
  }
}
</style>